<template>
	<div class="progressbar">
		<progress :percent='percent' activeColor="#e7e97d"></progress>
		<p>{{year}}年已经过去了<span class="stress">{{days}}</span>天，<span class="stress">{{percent}}%</span></p>
	</div>
</template>
<script>
	export default {
	  methods: {
	    isLeapYear () {
	      const year = new Date().getFullYear()
	      if (year % 400 === 0) {
	        return true
	      } else if (year % 4 === 0 && year % 100 !== 0) {
	        return true
	      } else {
	        return false
	      }
	    },
	    getDayOfYear () {
	      return this.isLeapYear() ? 366 : 365
	    }
	  },
	  computed: {
	    year () {
	      return new Date().getFullYear()
	    },
	    days () {
	      let start = new Date()
	      start.setMonth(0)
	      start.setDate(1)
	      let offset = new Date().getTime() - start.getTime()
	      return parseInt(offset / 1000 / 60 / 60 / 24) + 1
	    },
	    percent () {
	      return 100 * (this.days / this.getDayOfYear()).toFixed(3)
	    }
	  }
	}
</script>
<style lang="scss">
	.progressbar{
		width: 100%;
		text-align:center;
		font-size: 12px;
		color: #333333;
		margin-bottom:10px;
		progress{
			margin-bottom:10px;
		}
		.stress{
			color: #ea5a49;
		}
	}
</style>